<template>
  <div class="contains">
    <a-breadcrumb
      style="font-size: 18px; font-weight: bold; margin-bottom: 20px"
    >
      <a-breadcrumb-item>个人中心</a-breadcrumb-item>
      <a-breadcrumb-item>个人信息</a-breadcrumb-item>
    </a-breadcrumb>
    <a-descriptions bordered style="margin: 20px">
      <a-descriptions-item label="姓名">
        {{ userInfo.name }}
      </a-descriptions-item>
      <a-descriptions-item label="信用积分">{{
        userInfo.credit_point
      }}</a-descriptions-item>
      <a-descriptions-item label="账户余额">{{
        userInfo.balance
      }}</a-descriptions-item>
      <a-descriptions-item label="性别">
        {{ userInfo.sex ? "女" : "男" }}
      </a-descriptions-item>
      <a-descriptions-item label="年龄">
        {{ userInfo.age }}
      </a-descriptions-item>
      <a-descriptions-item label="居住地址">{{
        userInfo.address
      }}</a-descriptions-item>
      <a-descriptions-item label="工作单位">{{
        userInfo.work_unit
      }}</a-descriptions-item>
      <a-descriptions-item label="邮箱">
        {{ userInfo.email }}
      </a-descriptions-item>
      <a-descriptions-item label="手机号码">{{
        userInfo.phone_number
      }}</a-descriptions-item>
      <a-descriptions-item label="身份证号">{{
        userInfo.id_number
      }}</a-descriptions-item>
      <a-descriptions-item label="电表ID">{{
        userInfo.elec_meter_id
      }}</a-descriptions-item>
      <a-descriptions-item label="个人描述">{{
        userInfo.user_desc
      }}</a-descriptions-item>
    </a-descriptions>

    <div style="margin: 20px">
      <a-button type="primary" @click="showUpdateWin()">修改个人信息</a-button
      >&nbsp;
    </div>

    <div>
      <!-- 修改个人信息弹窗 -->
      <a-modal
        v-model:visible="updateWinVisible"
        title="修改个人信息"
        @ok="execUpdate"
      >
        <div>
          <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
            <a-form-item label="居住地址">
              <a-input v-model:value="newInfo.address" />
            </a-form-item>
            <a-form-item label="工作单位">
              <a-input v-model:value="newInfo.work_unit" />
            </a-form-item>
            <a-form-item label="邮箱">
              <a-input v-model:value="newInfo.email" />
            </a-form-item>
            <a-form-item label="手机号码">
              <a-input v-model:value="newInfo.phone_number" />
            </a-form-item>
            <a-form-item label="个人描述">
              <a-input v-model:value="newInfo.user_desc" />
            </a-form-item>
          </a-form>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script setup>
import { DownloadOutlined, DashboardOutlined } from "@ant-design/icons-vue";
import { defineComponent, ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { get, post, tip } from "@/common";
import { Modal, message } from "ant-design-vue";

const newInfo = reactive({
  user_id: "",
  address: "",
  work_unit: "",
  email: "",
  phone_number: "",
  user_desc: "",
});

const userInfo = ref({});
const getUserInfo = () => {
  get("/info/user/user").then((res) => {
    userInfo.value = res.data;
    // getElecMeterData();
  });
};
getUserInfo();

const copyUserInfoTonewInfo = () => {
  newInfo.address = userInfo.value.address;
  newInfo.work_unit = userInfo.value.work_unit;
  newInfo.email = userInfo.value.email;
  newInfo.phone_number = userInfo.value.phone_number;
  newInfo.user_desc = userInfo.value.user_desc;
};

const updateWinVisible = ref(false);

const showUpdateWin = () => {
  updateWinVisible.value = true;
  copyUserInfoTonewInfo();
};
const execUpdate = () => {
  if (
    newInfo.address == "" ||
    newInfo.work_unit == "" ||
    newInfo.phone_number == "" ||
    newInfo.email == ""
  ) {
    message.warn("信息不能为空！");
  } else {
    updateWinVisible.value = false;
    post("info/user/update", newInfo).then((res) => {
      getUserInfo();
      message.success(res.message);
    });
  }
};
// 电表信息
// const elecData = ref();
// const getElecMeterData = () => {
//   console.log("---------------------------");
//   console.log(userInfo.value.elec_meter_id);
//   get("http://47.104.251.136:8045/crawler", {
//     id: userInfo.value.elec_meter_id,
//   }).then((res) => {
//     elecData.value = res.data;
//     console.log(res.data);
//   });
// };
</script>

<style scoped>
.contains {
  padding: 10px;
}
</style>